<template>
  <v-container>
    <reset-dialog
      v-if="resetDialog"
      :dialog="resetDialog"
      @on-change-reset-dialog="changeResetDialog"
    ></reset-dialog>
    <v-main class="login-wrap" data-app="true">
      <v-container fluid fill-height>
        <v-layout align-center justify-center>
          <!-- <v-flex xs2 sm6 md3> -->

          <v-card class="login-panel mx-auto">
            <v-toolbar flat color="secondary" class='white--text'>
              <v-toolbar-title>登录 My-tutu</v-toolbar-title>
            </v-toolbar>
            <v-divider/>
            <v-card-text>
              <v-form
                ref="form"
                v-model="valid"
                lazy-validation >
                <v-text-field class="text-field"
                              v-model="loginInfo.email"
                              prepend-icon="mdi-email"
                              name="login"
                              label="邮箱"
                              hint="请输入正确的邮箱"
                              type="text"
                              :rules="emailRules"
                              hide-details="auto"
                              required></v-text-field>
                <v-text-field class="text-field"
                              v-model="loginInfo.password"
                              id="password"
                              prepend-icon="mdi-lock"
                              :append-icon="showPassword ? 'mdi-eye-off' : 'mdi-eye'"
                              :type="showPassword ? 'text' : 'password'"
                              name="password"
                              label="密码"
                              :rules="pwdRules"
                              @click:append="showPassword = !showPassword"
                              required
                              @keyup.enter="Login"></v-text-field>
              </v-form>
            </v-card-text >
            <v-card-actions>
              <v-spacer></v-spacer>
              <register-dialog
                :dialog="registerDialog"
                @on-change-dialog="changeRegisterDialog"
              ></register-dialog>
              <v-btn color="primary" text @click="registerDialog = true">注册</v-btn>
              <progress-button
                title="登录"
                :text='true'
                :disabled="loading"
                :loading="loading"
                @click="Login">
              </progress-button>
            </v-card-actions>
          </v-card>
          <!-- </v-flex> -->
        </v-layout>
      </v-container>
    </v-main>
  </v-container>
</template>

<script>
  import RegisterDialog from '@/components/login/RegisterDialog.vue'
  import ResetDialog from '@/components/login/ResetDialog.vue'
  import ProgressButton from '@/components/common/ProgressButton.vue'
  import userApi from '@/api/apiPath/userApi'

  export default {
    name: 'Login',
    components: {
      RegisterDialog,
      ResetDialog,
      ProgressButton
    },
    data() {
      return {
        valid: true,//开启表单的检查
        showPassword: false,
        loading: false,
        registerDialog: false,
        resetDialog: false,
        loginInfo: {
          email: '',
          password: ''
        },
        emailRules: [
          v => !!v || '必须输入邮箱字段',
          v => /^\w+([.-]?\w+)*@\w+([.-]\w+)*(\.\w{2,3})+$/.test(v) || '请输入正确格式的邮箱'
        ],
        pwdRules: [
          v => !!v || '必须输入密码字段',
          v => /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(v) || '密码由 6-16位字母数字组合组成'
        ]
      }
    },
    methods: {
      validate () {
        this.$refs.form.validate()
      },
      reset () {
        this.$refs.form.reset()
      },
      resetValidation () {
        this.$refs.form.resetValidation()
      },
      async Login() {
        if (!this.$refs.form.validate()) {return}
        const param = {
          email: this.loginInfo.email,
          password: this.loginInfo.password
        }
        this.loading = true
        try {
          const res = await userApi.login(param)
          if (res.message === '成功') {
            this.$toast.success('登录成功！')
            this.$store.commit('SET_CURRENT_USER', res.data)
            await this.$router.replace('/intro');
          } else this.$toast.error('登陆失败---')
        } catch (err) {
          console.log(err)
        }
        this.loading = false
      },
      changeRegisterDialog(val) {
        this.registerDialog = val
      },
      changeResetDialog(val) {
        this.resetDialog = val
      }
    }
  }
</script>

<style lang="scss" scoped>
  .login-panel{
    margin: 0 auto;
    height: 300px;
    min-width: 400px;
    max-width: 600px;
  }
  .white--text{
    text-align: center;
  }
</style>
